import React, { PureComponent, Fragment } from 'react';

import { connect } from 'dva';

import moment from 'moment';

import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

import { Form, Input, DatePicker, Select, Button, Card, InputNumber, Radio, Icon, Tooltip, Modal, message, Upload } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;

@Form.create()
class BasicForms extends PureComponent {

  state = {

  }

  handleSubmit = e => {
    e.preventDefault();

  };

  render() {
    const {
      submitting = false,
        form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };

    const uploadProps = {
      name: 'file',
      action: '//jsonplaceholder.typicode.com/posts/',
      headers: {
        authorization: 'authorization-text',
      },
      showUploadList: false,
      onChange() {},
    };

    return (
      <Card title="系统基本设置" bordered={false}>
          <QueueAnim delay={300} component={Form} onSubmit={this.handleSubmit} hideRequiredMark style={{ minHeight: 300, marginTop: 8 }}>
            <FormItem {...formItemLayout} label="文件上传" help="文件上传服务器类型" key="upload">
              <RadioGroup value={1}>
                <Radio value={1}>服务器本地上传</Radio>
                <Radio value={2}>七牛云存储 CDN</Radio>
              </RadioGroup>
                <Upload {...uploadProps}>
                  <p>
                    <Button type="primary" size="small">
                      <Icon type="upload" /> 上传水印 LOGO
                    </Button>
                  </p>
                </Upload>
            </FormItem>
            <FormItem {...formItemLayout} label="网站标题" help="网站标题前台显示标题" key="sponsor">
              {getFieldDecorator('sponsor', {
                rules: [
                  { required: true, message: "请输入网站标题", },
                ],
              })(<Input placeholder="请输入网站标题" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="网站描述" help="网站搜索引擎描述" key="remark">
              {getFieldDecorator('remark1', {
                rules: [
                  {required: true, message: "请输入网站描述"},
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder="请输入网站描述"
                  rows={4}
                />
              )}
            </FormItem>  
            <FormItem {...formItemLayout} label="网站关键字" help="网站搜索引擎关键字" key="remark1">
              {getFieldDecorator('remark', {
                rules: [
                  {required: true,message: "请输入网站关键字"},
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder="请输入网站关键字"
                  rows={4}
                />
              )}
            </FormItem>            
            <FormItem {...formItemLayout} label="网站备案号" help="设置在网站底部显示的备案号，如“陕ICP备123456789号“" key="sponsorId">
              {getFieldDecorator('sponsorId', {
                rules: [
                  { required: true, message: "请输入网站备案号", },
                ],
              })(<Input placeholder="请输入网站备案号" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="统计代码" key="remark2">
              {getFieldDecorator('remark2', {
                rules: [
                  {required: true, message: "请输入统计代码"},
                ],
              })(
                <TextArea
                  style={{ minHeight: 32 }}
                  placeholder="请输入统计代码"
                  rows={4}
                />
              )}
            </FormItem>  
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting} size="large" style={{width: '100%'}}>
                确认配置
              </Button>
            </FormItem>
          </QueueAnim>
        </Card>
    );
  }
}

export default BasicForms;